<template>
  <div class="order-detail">
    <div class="top">
      <span>{{
        odrerInfo.orderStatus == 0
          ? "预约成功，请等待..."
          : odrerInfo.orderStatus == 1
          ? "已取消"
          : "已完成"
      }}</span>
      <span class="current">{{
        odrerInfo.orderStatus == 0
          ? "预约成功"
          : odrerInfo.orderStatus == 1
          ? "订单取消"
          : "订单完成"
      }}</span>
    </div>
    <div class="bottom">
      <ul>
        <li>
          <span>回收时间：</span>
          <span>{{ odrerInfo.time }}</span>
        </li>
        <li>
          <span>联系人：</span>
          <span>{{ odrerInfo.consignee }}</span>
        </li>
        <li>
          <span>联系电话：</span>
          <span>{{ odrerInfo.mobile }}</span>
        </li>
        <li>
          <span>回收地址：</span>
          <span>{{ odrerInfo.address }}</span>
        </li>
        <li class="receive-detail">
          <span>回收详情：</span>
          <span
            ><textarea
              v-model="odrerInfo.recycleDetails"
              name=""
              id=""
              cols="30"
              rows="5"
            ></textarea
          ></span>
        </li>
        <li class="img-detail" v-if="odrerInfo.imageUrl != ''">
          <span>图片详情：</span>
          <span><img :src="odrerInfo.imageUrl" alt=""/></span>
        </li>
        <li>如有疑问，请拨打0571-83691082联系客服</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      odrerInfo: {
        time: "",
        consignee: "",
        mobile: "",
        address: "",
        recycleDetails: "",
        imageUrl: "",
        orderStatus: "",
      },
    };
  },
  methods: {
    handleBack1() {
      // 返回按钮监听
      window.onpopstate = (e) => {
        this.odrerInfo = {
          time: "",
          consignee: "",
          mobile: "",
          address: "",
          recycleDetails: "",
          imageUrl: "",
          orderStatus: "",
        };
        this.$router.replace({
          name: "MyOrder",
        });
      };
    },
    handleBack() {
      // 返回按钮监听
      window.onpopstate = (e) => {
        console.log(111);
        this.odrerInfo = {
          time: "",
          consignee: "",
          mobile: "",
          address: "",
          recycleDetails: "",
          imageUrl: "",
          orderStatus: "",
        };
        this.$router.replace({
          name: "Home",
        });
      };
    },
    getOrderDetail(id) {
      this.$axios
        .get(`/order/recycleOrder/${id}`, {
          params: {
            id,
          },
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code != 0) {
            return this.$toast({
              message: res.msg,
              position: "middle",
              duration: 1500,
            });
          }
          this.odrerInfo.time =
            this.dateFormat(res.data.startDate, "", "/") +
            "-" +
            new Date(parseInt(res.data.endDate))
              .getHours()
              .toString()
              .padStart(2, 0) +
            ":" +
            new Date(parseInt(res.data.endDate))
              .getMinutes()
              .toString()
              .padStart(2, 0);

          this.odrerInfo.consignee = res.data.consignee;
          this.odrerInfo.mobile = res.data.mobile;
          this.odrerInfo.address = res.data.villageName + res.data.address;
          // this.odrerInfo.address = this.odrerInfo.address.slice(0, 10) + "...";
          this.odrerInfo.recycleDetails = res.data.recycleDetails.join("、");
          this.odrerInfo.imageUrl = res.data.imageUrl;
          this.odrerInfo.orderStatus = res.data.orderStatus;
        })
        .catch(() => {});
    },
  },
  created() {
    console.log();
    if (this.$route.query.a == "add") {
      this.handleBack();
    } else if (this.$route.query.a == "search") {
      this.handleBack1();
    }

    this.getOrderDetail(this.$route.query.id);
  },
  mounted() {
    window.onscroll = null;
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (newPath === "/order-detail") {
        if (this.$route.query.a == "add") {
          this.handleBack();
        } else if (this.$route.query.a == "search") {
          this.handleBack1();
        }

        this.getOrderDetail(this.$route.query.id);
      }

      if (newPath === "/order-detail" && oldPath == "/my-order") {
        window.onscroll = null;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.order-detail {
  width: 100%;
  min-height: 100%;
  background-color: #3ba32a;
  padding: 0.9375rem /* 15/16 */;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 4.25rem /* 68/16 */;
    background-color: #fff;
    border-radius: 0.625rem /* 10/16 */ 0.625rem /* 10/16 */ 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.15625rem /* 18.5/16 */;
    padding-right: 0.84375rem /* 13.5/16 */;
    box-sizing: border-box;
    position: relative;
    &::before {
      content: "";
      display: inline-block;
      width: 0.8125rem /* 13/16 */;
      height: 0.8125rem /* 13/16 */;
      border-radius: 50%;
      background-color: #3ba32a;
      position: absolute;
      bottom: -0.40625rem /* 6.5/16 */;
      left: -0.40625rem /* 6.5/16 */;
      z-index: 99;
    }
    &::after {
      content: "";
      display: inline-block;
      width: 0.8125rem /* 13/16 */;
      height: 0.8125rem /* 13/16 */;
      border-radius: 50%;
      background-color: #3ba32a;
      position: absolute;
      bottom: -0.40625rem /* 6.5/16 */;
      right: -0.40625rem /* 6.5/16 */;
      z-index: 99;
    }
    span {
      font-size: 15px;
      font-weight: bold;
      color: #000;
      &:first-of-type {
      }
      &:nth-of-type(2) {
        &.current {
          color: #3ba32a;
          font-size: 13px;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    min-height: calc(100vh - 6.125rem /* 98/16 */);
    background-color: #fff;
    border-radius: 0 0 0.625rem /* 10/16 */ 0.625rem /* 10/16 */;
    position: relative;
    &::before {
      content: "";
      display: inline-block;
      width: calc(100% - 0.8125rem /* 13/16 */);
      height: 0;
      border-top: 0.5px solid #eeeeee;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: calc(100vh - 6.125rem /* 98/16 */);
      padding: 0.625rem /* 10/16 */ 1.25rem /* 20/16 */ 0;
      box-sizing: border-box;
      position: relative;
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 3.90625rem /* 62.5/16 */;
        line-height: 3.90625rem /* 62.5/16 */;
        span {
          &:first-of-type {
            color: #666;
            font-size: 13px;
          }
          &:nth-of-type(2) {
            color: #333;
            font-size: 13px;
            font-weight: bold;
          }
        }
        &.receive-detail {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          // height: 6.25rem /* 100/16 */;
          // line-height: 6.25rem /* 100/16 */;
          height: auto;
          line-height: auto;
          span {
            &:nth-of-type(2) {
              textarea {
                outline: none;
                border: none;
                background: #f5f5f5;
                border-radius: 0.625rem /* 10/16 */;
                padding: 0.3125rem /* 5/16 */;
                box-sizing: border-box;
                width: 100%;
              }
            }
          }
        }
        &.img-detail {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // height: 3.90625rem;
          // line-height: 3.90625rem;
          line-height: auto;
          height: auto;
          span {
            &:nth-of-type(2) {
              img {
                // width: 7.5rem /* 120/16 */;
                width: 100%;
                height: 7.5rem /* 120/16 */;
                border: 5px solid #fff;
                box-sizing: border-box;
                border-radius: 10px;
                // border: 1px solid #000;
              }
            }
          }
        }
        &:last-of-type {
          position: absolute;
          bottom: -20px;
          left: 50%;
          font-size: 12px;
          color: #666;
          transform: translate(-50%, 0);
          width: 70%;
        }
      }
    }
  }
}
</style>
